import { Button, Space, Table, Breadcrumb, Card, Popover } from 'antd'
import { ExportExcel, paginationConfig } from "@/utils"
import './index.scss'
import { Outlet, useNavigate, Link } from 'react-router-dom'
import {
  ExportOutlined,
  FileSearchOutlined,
  DownSquareOutlined
} from '@ant-design/icons'
import CNumCard from './Card/CNumCard'
import CTypeCard from './Card/CTypeCard'
import WTypeCard from './Card/WTypeCard'


function generateDatasets () {
  let datasets = []
  let idCounter = 1

  const fileTypes = { 1: "Distance", 2: "Time", 3: "Specs" }
  const customerNumbers = [50, 150, 250]
  const capacityTypes = [0, 1, 2]
  const windowTypes = [0, 1, 2, 3, 4]

  Object.entries(fileTypes).forEach(([fileTypeKey, fileTypeValue]) => {
    customerNumbers.forEach(customerNumber => {
      capacityTypes.forEach(capacityType => {
        windowTypes.forEach(windowType => {
          datasets.push({
            key: idCounter,
            id: idCounter,
            name: `${fileTypeValue}_${customerNumber}_${capacityType}_${windowType}`,
            file_type: parseInt(fileTypeKey),
            c_num: customerNumber,
            capacity_type: capacityType,
            window_type: windowType
          })
          idCounter++
        })
      })
    })
  })

  return datasets
}

let datasets = generateDatasets()
// console.log(datasets)



const Dataset = () => {
  const navigate = useNavigate()
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      key: 'id',
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: <div className='title' >文件名</div>,
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: (text) => <div className='content'>{text}</div>,
      ellipsis: true
    },
    {
      title: <div className='title'>文件类型</div>,
      align: 'center',
      dataIndex: 'file_type',
      key: 'file_type',
      filters: [
        {
          text: '距离',
          value: 1,
        },
        {
          text: '时间',
          value: 2,
        },
        {
          text: '配置',
          value: 3,
        }
      ],
      filterSearch: true,
      onFilter: (value, record) => record.file_type === value,
      render: (type) => type === 1 ? <div className='content'>距离</div> : type === 2 ? <div className='content'>时间</div> : <div className='content'>配置</div>,
    },
    {
      title: <div className='title'>客户数量</div>,
      align: 'center',
      dataIndex: 'c_num',
      key: 'c_num',
      render: (text) => <div className='content'>{text}</div>,
      sorter: (a, b) => a.c_num - b.c_num,
      filters: [
        {
          text: '50',
          value: 50,
        },
        {
          text: '150',
          value: 150,
        },
        {
          text: '250',
          value: 250,
        }
      ],
      onFilter: (value, record) => value === record.c_num,
    },
    {
      title: <div className='title'>车辆容量类型</div>,
      align: 'center',
      dataIndex: 'capacity_type',
      key: 'capacity_type',
      render: (text) => <div className='content'>{text}</div>,
      sorter: (a, b) => a.capacity_type - b.capacity_type,
      filters: [
        {
          text: '0',
          value: 0,
        },
        {
          text: '1',
          value: 1,
        },
        {
          text: '2',
          value: 2,
        },
      ],
      onFilter: (value, record) => value === record.capacity_type,
    },
    {
      title: <div className='title'>时间窗类型</div>,
      align: 'center',
      dataIndex: 'window_type',
      key: 'window_type',
      render: (text) => <div className='content'>{text}</div>,
      sorter: (a, b) => a.window_type - b.window_type,
      filters: [
        {
          text: '0',
          value: 0,
        },
        {
          text: '1',
          value: 1,
        },
        {
          text: '2',
          value: 2,
        }, {
          text: '3',
          value: 3,
        },
        {
          text: '4',
          value: 4,
        }
      ],
      onFilter: (value, record) => value === record.window_type,
    },
    {
      title: <div className='title'>操作</div>,
      align: 'center',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button
            type='primary'
            style={{
              backgroundColor: '#fa541c'
            }}
            onClick={() => clickFile(record)}
            icon={<FileSearchOutlined />
            }>查看</Button>
        </Space>
      ),
    },
  ]


  // 点击查看
  const clickFile = (data) => {
    const c_num = data.c_num
    const capacity_type = data.capacity_type
    const window_type = data.window_type
    const file_type = data.file_type
    const last = file_type === 1 ? 'DistanceMatrix' : file_type === 2 ? 'TimeMatrix' : 'Specs_sdp'
    const filename = "test" + c_num + "-0-0-0-0.d" + capacity_type + ".tw" + window_type + last + ".dat"
    navigate(`/dataset/data?filename=${filename}&&c_num=${data.c_num}&&title_name=${data.name}&&file_type=${file_type}`)
  }


  const exportExcel = () => {
    ExportExcel(columns, datasets, 'DataSet')
  }


  return (
    <div className='table' id='table'>
      <Card
        title={
          <Breadcrumb items={[
            { title: <Link to={'/'}>首页</Link> },
            { title: '数据集' },
          ]}
            className='breadcrumb'
          />
        }
      >
        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
          <Button type='primary' onClick={exportExcel} icon={<ExportOutlined />}>导出表格</Button>
          <Space size={'small'} style={{
            marginRight: '25vw'
          }}>
            <Popover placement="bottomLeft"
              title={CNumCard}
              color='white'
            >
              <Button type='primary'
                style={{
                  backgroundColor: '#13c2c2'
                }}
                icon={<DownSquareOutlined />}
              >客户数量介绍</Button>
            </Popover>
            <Popover placement="bottomLeft"
              title={CTypeCard}
              color='white'>
              <Button type='primary'
                style={{
                  backgroundColor: '#13c2c2'
                }}
                icon={<DownSquareOutlined />}
              >容量类型介绍</Button>
            </Popover>
            <Popover placement="bottomRight"
              title={WTypeCard}
              color='white'>
              <Button type='primary'
                style={{
                  backgroundColor: '#13c2c2'
                }}
                icon={<DownSquareOutlined />}
              >时间窗类型介绍</Button>
            </Popover>
          </Space>
        </div>

        <Table
          columns={columns}
          bordered
          dataSource={datasets}
          size='large'
          style={{
            marginTop: 10,
          }}
          pagination={paginationConfig}
          scroll={{
            y: 'calc(100vh - 400px)',
          }}
        />
        <Outlet />
      </Card>
    </div>
  )
}

export default Dataset